<template>
    <view class="login-page">
        <view class="h1">欢迎登录生生创客商家平台</view>
        <image src="/static/logo.png" mode="aspectFit"></image>
        <view class="input-container">
            <view class="input-item">
                <input type="text" placeholder="输入手机号" v-model="phoneNumber"></input>
            </view>
            <view class="input-item">
                <input type="password" placeholder="请输入密码" v-model="password"></input>
            </view>
        </view>
        <button class="login-button" @click="handleLogin">登录</button>
        <view class="agreement">
            <checkbox-group>
                <label>
                    <checkbox value="agree" v-model="agreeToTerms"></checkbox>
                    已阅读并同意《用户注册协议》《隐私政策》
                </label>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                phoneNumber: '',
                password: '',
                agreeToTerms: false
            };
        },
        methods: {
            handleLogin() {
                if (!this.agreeToTerms) {
                    uni.showToast({
                        title: '请先同意用户协议',
                        icon: 'none'
                    });
                    return;
                }
                // 这里可以添加登录逻辑
                console.log('手机号:', this.phoneNumber);
                console.log('密码:', this.password);
            }
        }
    };
</script>

<style scoped>
    .login-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 30px;
        background: linear-gradient(180deg, #002DAA 43%, #002daa00 100%);
        min-height: 100vh;
    }

    .h1 {
        color: #ffffff;
        text-align: center;
        font-family: "Fontquan-XinYiGuanHeiTi", sans-serif;
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 40px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input {
        width: 90%;
        height: 60px;
        border-radius: 15px;
        padding-left: 20px;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 18px;
    }

    image {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 50%;
        background: url(<path-to-image>) lightgray 50% / cover no-repeat;
        margin-bottom: 60px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .input-item {
        display: flex;
        width: 80%;
        max-width: 400px;
        height: 60px;
        padding: 10px 20px;
        align-items: center;
        gap: 10px;
        border-radius: 15px;
        background: #FFF;
        margin-bottom: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .login-button {
        display: flex;
        width: 80%;
        max-width: 400px;
        height: 60px;
        padding: 10px 31px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 15px;
        background: #002DAA;
        margin: 60px 0;
        color: white;
        font-size: 20px;
        font-weight: 600;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }

    .login-button:hover {
        background-color: #001f7a;
    }

    .agreement {
        margin-top: 30px;
        font-size: 16px;
        color: white;
    }
</style>